<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        a {
            text-decoration: none;
            color: #785032;
        }
        
        .top {
            position: relative;
            display: inline-flex;
            width: 100%;
            background-color: #FDE8B2;
            height: 60px;
        }
        
        .top {
            justify-content: flex-end;
            align-items: center;
        }
        
        .main {
            position: relative;
            background-color: #FDE8B2;
            height: 100%;
        }
        
        .main p {
            text-indent: 2em;
            font-size: 18px;
            letter-spacing: 0.5em;
            padding-top: 15px;
        }
        
        .top .cover {
            content: '';
            /* 隐藏遮罩层· */
            /* display: none; */
            /* 绝对定位不占有位置,但要设置相对定位,自绝父相 */
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #191711;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 25px;
        }
        
        .top .cover .you .ico::before {
            font-family: "iconfont";
            content: "\e603";
            font-size: 25px;
            margin: 0 10px;
        }
        
        .sq {
            display: none;
        }
        
        .ws {
            display: none;
        }
        
        .main .floor {
            /* content: ''; */
            /* 隐藏遮罩层· */
            /* display: none; */
            /* 绝对定位不占有位置,但要设置相对定位,自绝父相 */
            position: absolute;
            display: grid;
            bottom: 0;
            left: 0;
            width: 100%;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 60px);
            background: #191711;
            color: #E3E3E2;
            font-size: 24x;
            text-align: center;
            line-height: 60px;
        }
        
        .main .floor .up {
            grid-column-start: span 2;
            background-color: #191711;
        }
        
        .main .floor .xia {
            grid-column-start: span 2;
            background-color: #191711;
        }
        
        .main .floor .item {
            position: relative;
            /* flex-direction: column; */
            grid-row-start: span 2;
            /* background-color: crimson; */
            background-color: #191711;
            font-size: 18px;
            padding: 40px 0;
        }
        
        .main .floor .item::before {
            position: absolute;
            font-family: "iconfont";
            /* content: "\e603"; */
            content: "\e511";
            top: 8%;
            left: 30%;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="sq">
            <div class="cover">
                <span>&lt;</span>
                <div class="you">
                    <span class="ico"></span>
                    <span class="ico"></span>
                    <span class="ico"></span>

                </div>
            </div>
        </div>
        <!-- <span>第一章 陨落的天才</span> -->
        <a href="#"><span>投诉</span></a>
    </div>
    <div class="main">
        <h2>第一章 陨落的天才</h2>
        <p>“斗之力，三段！”</p>
        <br>
        <p>
            望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字， 少年面无表情， 唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之， 带来一阵阵钻心的疼痛…
        </p>
        <br>
        <p>
            “萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位年男，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…
        </p>
        <br>
        <p> 年男话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
        <br>
        <p>
            “三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”

        </p>
        <p>
            “三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”
        </p>
        <div class="ws">
            <div class="floor">
                <div class="up">上一章</div>
                <div class="xia">下一章</div>
                <div class="item">
                    目录
                </div>
                <div class="item">目录</div>
                <div class="item">目录</div>
                <div class="item">目录</div>
            </div>
        </div>
    </div>
    <script>
        $(function() {

            $('body').click(function() {
                // console.log(123);
                // $('sq').fadeIn(1000);
                // $('.sq').stop().fadeToggle(1000);
                $('.sq').stop().fadeToggle(1000);
                // $('.sq').stop().slideDown(100000);
                $('.ws').stop().fadeToggle(1000);


            })
        })
    </script>
</body>

</html>